<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="/css/elementui/index.css">
<link rel="stylesheet" href="/css/exam/css/style.css">
<link rel="stylesheet" href="/iconfont/iconfont.css">
</head>
<body>
<div id="app">
  <div  class="p-30">
    <el-row>
      <span class="icon iconfont icon-arrow_back"></span> <a href="{{route('admin.examview.list')}}">返  回</a> | 考试记录
    </el-row><br>

    <el-row type="flex" class="row-bg" justify="space-between">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="学员ID">
          <el-input v-model="formInline.uid" placeholder="学员ID"></el-input>
        </el-form-item>
        <el-date-picker
          v-model="formInline.created_at_begin"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择考试时间 开始">
        </el-date-picker>
        <el-date-picker
          v-model="formInline.created_at_end"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择考试时间 结束">
        </el-date-picker>
        <el-date-picker
          v-model="formInline.submit_at_begin"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择交卷时间 开始">
        </el-date-picker>
        <el-date-picker
          v-model="formInline.submit_at_end"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择交卷时间 结束">
        </el-date-picker>

        <el-form-item>
          <el-button  type="primary"  @click="searchput">筛&ensp;&ensp;选</el-button>
        </el-form-item>
      </el-form>
    </el-row>

    <template>
        <el-table  :data="recordData"  border  style="width: 100%" >   
            <el-table-column prop="id"  label="ID"  width="12" v-if="false"> </el-table-column>
            <el-table-column prop="uid" label="学员ID" width="80"></el-table-column>
             <!-- <el-table-column	label="宝&ensp;&ensp;贝">
              <template  slot-scope="scope"> 
                <span v-if="scope.row.status === 4">33333</span>           
                <span>@{{scope.row.uid}}</span>
              </template> 
            </el-table-column>  -->
            <el-table-column prop="username" label="学&ensp;&ensp;员" width=""> </el-table-column>
            <el-table-column prop="score" label="得&ensp;&ensp;分" sortable width="100"> </el-table-column>
            <el-table-column prop="duration" label="用&ensp;&ensp;时" sortable width="100"></el-table-column>
            <el-table-column prop="status" label="状&ensp;&ensp;态">
              <template slot-scope="scope">
                <el-tag type="info" v-if="scope.row.status === 1">未开始</el-tag>
                <el-tag type="primary" v-else-if="scope.row.status === 2"
                  >考试中</el-tag
                >
                <el-tag type="primary" v-else-if="scope.row.status === 3"
                  >阅卷中</el-tag
                >
                <el-tag type="info" v-else-if="scope.row.status === 4"
                  >已结束</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column prop="created_at" label="开始时间"  sortable width="200"> </el-table-column>
            <el-table-column prop="submit_at" label="交卷时间" sortable width="200"> </el-table-column>
            <el-table-column fixed="right"  label="操&ensp;&ensp;作"  width="">
            <template slot-scope="scope">
				<el-button  size="mini"  type="primary" ><a style="color:#fff" :href="'/admin/examview/paperShow?id=' + scope.row.id">查&ensp;&ensp;看</a></el-button>                
            </template>
            </el-table-column>
        </el-table><br>
        <!-- 分页组件 -->
        <div class="block" style="margin-top:15px;">
            <el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange" 
            :current-page="currentPage" 
            :page-sizes="[10,20,50,100]" 
            :page-size="pageSize" 
            layout="total, sizes, prev, pager, next, jumper" 
            :total="count">
            </el-pagination>
        </div>

    </template>


  </div>

</div>
</body>
<script src="/css/exam/js/vue.js"></script>
<script src="/css/elementui/index.js"></script>
<script src="/css/exam/js/axios.min.js"></script>
<script>

const app = new Vue({
  el: '#app',
  data() {
    return {    
      id:'',    
      recordData: [], //考试记录数据
      formInline: {
        examtime:null,
        submittime:null,
        created_at_begin: null,
        submit_at_begin: null,
        created_at_end: null,
        submit_at_begin: null,
        uid: null,
        },
       currentPage: 1, // 当前页码
       count: 10, // 总条数
       pageSize: 10,// 每页的数据条数
    }
  },
  created() {
    this.getUrlKey(),
    this.getrecorddata()
  },

  methods: {
          //获取当前浏览器地址url中的id
          getUrlKey() {
            var url = window.location.href ;             //获取当前url
            var dz_url = url.split('#')[0];              //获取#/之前的字符串
            var cs = dz_url.split('?')[1];               //获取?之后的参数字符串
            var cs_arr = cs.split('&');                  //参数字符串分割为数组
            var cs={};
            for(var i=0;i<cs_arr.length;i++){         //遍历数组，拿到json对象
              cs[cs_arr[i].split('=')[0]] = cs_arr[i].split('=')[1]
            }
            this.id = cs.id;
            console.log("this.id:"+this.id);
            },

         // 获取考试记录列表
          async getrecorddata(parameter) {       
            // axios.post('/admin/paper/paper_record',parameter)
            let id = this.id;
            axios.post('/admin/paper/paper_record',
            {pid:id,uid:this.formInline.uid,created_at_begin:this.formInline.created_at_begin,submit_at_begin:this.formInline.submit_at_begin,created_at_end:this.formInline.created_at_end,submit_at_end:this.formInline.submit_at_end,page:this.currentPage,limit:this.pageSize})
            .then(response =>{
                console.log('请求成功：',response.data.data);
                this.recordData = response.data.data;
                this.count = response.data.count;
            }).catch(error =>{
                console.log('请求失败：' + error);
            })
          },       

          // 分页页码  
          handleSizeChange(val){
            console.log(`每页 ${val} 条`);
				    this.currentPage = 1;
				    this.pageSize = val;
            this.getrecorddata()
          },
          handleCurrentChange(val){
            console.log(`当前页: ${val}`);
				    this.currentPage = val;
					  this.getrecorddata()

          },
          // 搜索事件         
          searchput(){
            this.currentPage = 1;
            this.getrecorddata() 
          }, 
        }       

  })

</script>
<style scoped>
 .el-table .el-table__cell:nth-child(1){text-align: center;}
  a{color:#409EFF;text-decoration: none;}
</style>
</html>

